<template>
  <div class="wrap">
    <div class="header">
      <div class="search">
        <user-check-box v-model="queryParams.userIds" @change="changeOption" :filter-stop="true" @apiUserFinish="firstGetData" :disdisabled="loading"></user-check-box>

        <div class="mgt20">
          <el-radio-group v-model="queryParams.tabType" size="medium" @change="changeOption();" :disabled="loading">
            <el-radio-button class="mgb10" :label="1">{{getWareHouseName()}}</el-radio-button>
            <el-radio-button class="mgb10" :label="2" v-if="$store.getters.accountMKD">{{$t('shipment.mercadoFull')}}</el-radio-button>
            <el-radio-button class="mgb10" :label="3" v-if="$store.getters.accountFalabella">{{$t('shipment.falabellaFull')}}</el-radio-button>
            <el-radio-button class="mgb10" :label="4" v-if="$store.getters.accountShopee">{{$t('shipment.shopeeFull')}}</el-radio-button>
            <el-radio-button class="mgb10" :label="5" v-if="$store.getters.accountShein">{{$t('shipment.sheinFull')}}</el-radio-button>
            <el-radio-button class="mgb10" :label="6" v-if="$store.getters.accountAmazon">{{$t('shipment.amazonFull')}}</el-radio-button>
            <el-radio-button class="mgb10" :label="7" v-if="$store.getters.accountTikTok">{{$t('shipment.tiktokFull')}}</el-radio-button>
            <el-radio-button class="mgb10" :label="9" v-if="$store.getters.accountAliexpress">{{$t('shipment.aliexpressFull')}}</el-radio-button>
          </el-radio-group>
        </div>

        <div style="display: flex;justify-content: space-between;" class="mgt20">
          <div class="left">

            <div style="display: inline-block" class="mgr20 mgb10">{{ $t('table.平台前台库存',{platform: getMercadoName()}) }}：
              <el-button :type="this.queryParams.inventoryTips === 1 ? 'danger' : ''"   @click="changeButton('inventory')">{{$t('common.below num',{num: inventoryTipsNum})}}</el-button>
            </div>

            <div style="display: inline-block" class="mgr20 mgb10" v-if="$store.getters.accountFalabella">{{ $t('table.平台前台库存',{platform: getFalabellaName()}) }}：
              <el-button :type="this.queryParams.faInventoryTips === 1 ? 'danger' : ''"   @click="changeButton('faInventory')">{{$t('common.below num',{num: faInventoryTipsNum})}}</el-button>
            </div>

            <div style="display: inline-block" class="mgr20 mgb10" v-if="$store.getters.accountShopee">{{ $t('table.平台前台库存',{platform: getShopeeName()}) }}：
              <el-button :type="this.queryParams.spInventoryTips === 1 ? 'danger' : ''"   @click="changeButton('spInventory')">{{$t('common.below num',{num: spInventoryTipsNum})}}</el-button>
            </div>

            <div style="display: inline-block" class="mgr20 mgb10" v-if="$store.getters.accountShein">{{ $t('table.平台前台库存',{platform: getSheinName()}) }}：
              <el-button :type="this.queryParams.siInventoryTips === 1 ? 'danger' : ''"   @click="changeButton('siInventory')">{{$t('common.below num',{num: siInventoryTipsNum})}}</el-button>
            </div>

            <div style="display: inline-block" class="mgr20 mgb10" v-if="$store.getters.accountAmazon">{{ $t('table.平台前台库存',{platform: getAmazonName()}) }}：
              <el-button :type="this.queryParams.awsInventoryTips === 1 ? 'danger' : ''"   @click="changeButton('awsInventory')">{{$t('common.below num',{num: awsInventoryTipsNum})}}</el-button>
            </div>

            <div style="display: inline-block" class="mgr20 mgb10" v-if="$store.getters.accountTikTok">{{ $t('table.平台前台库存',{platform: getTikTokName()}) }}：
              <el-button :type="this.queryParams.tiktokInventoryTips === 1 ? 'danger' : ''"   @click="changeButton('tiktokInventory')">{{$t('common.below num',{num: tiktokInventoryTipsNum})}}</el-button>
            </div>

            <div style="display: inline-block" class="mgr20 mgb10" v-if="$store.getters.accountAliexpress">{{ $t('table.平台前台库存',{platform: getAliexpressName()}) }}：
              <el-button :type="this.queryParams.aliexpressInventoryTips === 1 ? 'danger' : ''"   @click="changeButton('aliexpressInventory')">{{$t('common.below num',{num: aliexpressInventoryTipsNum})}}</el-button>
            </div>

            <div style="display: inline-block" class="mgr20 mgb10">{{$t('table.代发库存',)}}：
              <el-button :type="this.queryParams.stockTips === 1 ? 'danger' : ''" @click="changeButton('stock')">{{$t('common.below num',{num: stockTipsNum})}}</el-button>
            </div>



            <div style="display: inline-block" class="mgr20 mgb10">

              <div style="display: inline-block;" class="mgr10 mgb10">
                <el-select v-model="queryParams.platformType" size="small" style="width: 130px" @change="queryParams.accountId = '';changeOption()">
                  <el-option :label="$t('shipment.allPlatforms')" value=""></el-option>
                  <el-option :label="getMercadoName()" :value="1"></el-option>
                  <el-option :label="getFalabellaName()" :value="2" v-if="$store.getters.accountFalabella"></el-option>
                  <el-option :label="getShopeeName()" :value="3" v-if="$store.getters.accountShopee"></el-option>
                  <el-option :label="getSheinName()" :value="4" v-if="$store.getters.accountShein"></el-option>
                  <el-option :label="getAmazonName()" :value="5" v-if="$store.getters.accountAmazon"></el-option>
                  <el-option :label="getTikTokName()" :value="6" v-if="$store.getters.accountTikTok"></el-option>
                  <el-option :label="$t('order.packet')" :value="7"></el-option>
                  <el-option :label="getAliexpressName()" :value="8" v-if="$store.getters.accountAliexpress"></el-option>
                </el-select>
              </div>

              <div style="display: inline-block;" class="mgr10 mgb10">
                <el-select v-model="queryParams.accountId" size="small" style="width: 130px" @change="changeOption">
                  <el-option :label="'全部店铺'" value=""></el-option>
                  <el-option v-for="(item, index) in selectAccountList" :key="index" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </div>

              <div style="display: inline-block;"  v-if="queryParams.tabType === 1">
                <el-select v-model="queryParams.isCombinationGoods" class="mgr10 mgb10" size="small" style="width: 130px" @change="changeOption">
                  <el-option :label="'全部商品类型'" value=""></el-option>
                  <el-option :label="'单商品'" :value='1'></el-option>
                  <el-option :label="'组合商品'" :value='2'></el-option>
                </el-select>

                <el-select v-model="queryParams.haveStock" size="small" class="mgr10 mgb10" style="width: 130px" @change="changeOption">
                  <el-option :label="'全部库存商品'" value=""></el-option>
                  <el-option :label="'有库存商品'" :value='1'></el-option>
                  <el-option :label="'无库存商品'" :value='0'></el-option>
                </el-select>

              </div>

              <el-input
                size="small"
                style="display: inline-block; width: 260px; margin-right: 10px; margin-bottom: 10px"
                v-model="queryParams.keyword"
                :placeholder="$t('common.searchForCompleteListingIDorSKU')"
                @keyup.enter.native="changeOption(true, 'search')"
                clearable @clear="changeOption(false, 'clear')"
              ></el-input>
              <el-button size="small" type="primary" @click="changeOption(true, 'search')">{{ $t('common.search') }}</el-button>

              <custom-fields-dialog
                :default-fields-config="defaultFieldsConfig"
                :initUserSelectedFields="userSelectedFields"
                @submit="submitTableField"
                class="mgl10"
              ></custom-fields-dialog>

              <export-button :func="getStockGoodsList" :query-params="queryParams" class="mgr10 mgb10" :exportType="'stock_list'" :getTotal="total"></export-button>
            </div>


            <upload-excel style="display: inline-block" class="mgr10 mgb10" v-if="$store.getters.siteId === 'CL'"></upload-excel>

          </div>

          <div class="right">

          </div>

        </div>

      </div>


    </div>
    <div class="content" v-show="queryParams.tabType === 1">
      <el-table
        v-loading="loading"
        :data="data"
        border
        @sort-change="handleSortChange"
        :key="refreshTableKey"
        v-tableHeightV2="{ bottomOffset: -100, additionalSelectors: ['.header', '.table-tips', '.page-wrap'] }"
        height="100px"
        ref="tableDataOne"
      >
        <el-table-column
          prop="goodsImage"
          :label="$t('table.productCover')"
          align="center"
          width="110"
          fixed
        >
          <template slot-scope="{row}">
            <div class="img-box img-one">
              <img :src="row.image" alt="">
              <template v-if="row.isCombinationGoods === 1">
                <el-tooltip class="item" effect="dark" placement="top-start">
                  <div slot="content" style="font-size: 14px;">
                    {{$t('table.组合商品')}}：
                    <p
                      v-for="(item, index) in row.combinationGoodsInfoData"
                      :key="index"
                    >
                      <template v-if="item.num > 0">
                        {{ item.sku }} * {{ item.num }}
                      </template>
                    </p>
                  </div>
                  <el-tag
                    type="success"
                    effect="light"
                    class="order-status-tag img-tag"
                  >
                    {{$t('table.组合')}}
                  </el-tag>
                </el-tooltip>
              </template>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          v-for="v in tableFieldsConfig"
          :key="v.prop"
          :prop="v.prop"
          :label="v.label"
          :align="v.align"
          :min-width="v.minWidth"
          :fixed="!!v.fixed"
          :show-overflow-tooltip="!!v.showOverflowTooltip"
          :sortable="v.sortable ? v.sortable : false"
        >
          <!--    表头      -->
          <template #header >


            <template v-if="v.prop === 'stockNum'">
              <span>{{v.label}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>
                  <div>
                    仓库已接收分拣并已清点上架的一件代发库存，可开始销售，可调拨到暂存中转后送官方仓
                  </div>
                  <br>
                  <div>
                    <div>Listing ID （SKU）行对应库存表示商品已贴对应的官方产品标（MLCode）</div>
                    <div>系统标（SKU）行对应库存表示商品已贴系统生成的产品标</div>
                    <div>未贴标行对应库存表示商品尚未贴产品标</div>
                  </div>
                  <br>
                  <div>
                    如果为库存负数，一般因接入前期未及时在本系统中添加对应商品的库存（货件）导致的
                    <br>
                    请与运营（仓库）人员联系核对调整
                  </div>

                </template>
                <i class="el-icon-question table-question-icon"></i>
              </el-tooltip>
            </template>

            <template v-else-if="v.prop === 'stockNumSorted'">
              <span>{{v.label}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>
                  <div>
                    仓库已接收分拣但还未清点上架的一件代发库存，不可销售，不可调拨到暂存中转或送官方仓
                  </div>
                  <br>
                  <div>
                    <div>Listing ID （SKU）行对应库存表示商品已贴对应的官方产品标（MLCode）</div>
                    <div>系统标（SKU）行对应库存表示商品已贴系统生成的产品标</div>
                    <div>未贴标行对应库存表示商品尚未贴产品标</div>
                  </div>
                </template>
                <i class="el-icon-question table-question-icon"></i>
              </el-tooltip>
            </template>

            <template v-else-if="v.prop === 'middleStockNum'">
              <span>{{v.label}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>
                  <div>
                    仓库已接收分拣并清点上架的暂存中转库存，不可销售，可调拨到一件代发或送官方仓
                  </div>
                  <br>
                  <div>
                    <div>Listing ID （SKU）行对应库存表示商品已贴对应的官方产品标（MLCode）</div>
                    <div>系统标（SKU）行对应库存表示商品已贴系统生成的产品标</div>
                    <div>未贴标行对应库存表示商品尚未贴产品标</div>
                  </div>
                </template>
                <i class="el-icon-question table-question-icon"></i>
              </el-tooltip>
            </template>

            <template v-else-if="v.prop === 'middleStockNumSorted'">
              <span>{{v.label}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>
                  <div>
                    仓库已接收分拣但还未清点上架的暂存中转库存，不可销售，不可调拨到一件代发或送官方仓
                  </div>
                  <br>
                  <div>
                    <div>Listing ID （SKU）行对应库存表示商品已贴对应的官方产品标（MLCode）</div>
                    <div>系统标（SKU）行对应库存表示商品已贴系统生成的产品标</div>
                    <div>未贴标行对应库存表示商品尚未贴产品标</div>
                  </div>
                </template>
                <i class="el-icon-question table-question-icon"></i>
              </el-tooltip>
            </template>

            <template v-else-if="v.prop === 'fullStockNum'">
              <span>{{v.label}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>
                  <div>
                    仓库已接收分拣，等待出库的官方仓直送、线下配送类型货件和送仓工单的商品库存数量，不可销售
                  </div>
                  <br>
                  <div>
                    <div>Listing ID （SKU）行对应库存表示商品已贴对应的官方产品标（MLCode）</div>
                    <div>系统标（SKU）行对应库存表示商品已贴系统生成的产品标</div>
                    <div>未贴标行对应库存表示商品尚未贴产品标</div>
                  </div>
                </template>
                <i class="el-icon-question table-question-icon"></i>
              </el-tooltip>
            </template>

            <template v-else-if="v.prop === 'totalStockNum'">
              <span >{{$t('table.仓库总库存',{warehouseName: getWareHouseName()})}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>总库存=代发库存（已上架）+ 代发库存（待上架）+ 暂存中转（已上架）+ 暂存中转（待上架）+ 待送仓库存</template>
                <i class="el-icon-question table-question-icon"></i>
              </el-tooltip>
            </template>

            <template v-else-if="v.prop === 'underWayNum'">
              <span>{{v.label}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>海外仓还未分拣入仓的头程、移仓、退仓货件商品数量</template>
                <i class="el-icon-question table-question-icon"></i>
              </el-tooltip>
            </template>

            <template v-else-if="v.prop === 'goodsValue'">
              <span>{{v.label}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>{{$t('table.单个商品的货物申报价值')}}</template>
                <i class="el-icon-question table-question-icon"></i>
              </el-tooltip>
            </template>

            <template v-else-if="v.prop === 'price'">
              <span>{{$t('售价')}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>{{ $t('商品有折扣价时显示折扣价，无折扣价时显示为原价') }}</template>
                <i class="el-icon-question font-blue" style="margin-left: 5px"></i>
              </el-tooltip>
            </template>

            <template v-else-if="v.prop === 'combinationGoodsStockNum'">
              <span>{{$t('table.组合库存')}}</span>
              <el-tooltip class="item" effect="dark" placement="top">
                <template #content>组合库存根据子商品的组合数量和一件代发库存自动计算，取最低值</template>
                <i class="el-icon-question font-blue" style="margin-left: 5px"></i>
              </el-tooltip>
            </template>

            <template v-else>{{v.label}}</template>
          </template>

          <!--     表格内容     -->
          <template slot-scope="{row}">

            <template v-if="v.prop === 'goodsTitle'">
              <el-tooltip placement="top" :content="row.title">
                <div class="title hidden-2">
                  {{ row.title }}
                </div>
              </el-tooltip>

              <p class="goods-attr">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                  style="color: #7F7F7F;"
                >
                {{attr.name}} : {{attr.value}}
                <span class="attr-link"> | </span>
                </span>
              </p>
            </template>

            <template v-else-if="v.prop === 'price'">
              <div
                v-for="goods in row.goodsList"
                :key="goods.id"
              >
                <template v-if="goods.price">
                  {{goods.currencyId}}  {{goods.price}}
                </template>
                <template v-else>
                  -
                </template>
              </div>
            </template>

            <template v-else-if="v.prop === 'goodsList'">
              <div
                v-for="goods in row.goodsList"
                :key="goods.id"
              >
                <template v-if="goods.isTB">
                  {{$t('shipment.Not labeled')}}
                </template>
                <template v-else-if="goods.isSystemLabel">
                  {{$t('shipment.System label')}} ({{goods.sku}})
                </template>
                <template v-else>
                  {{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}}
                </template>
              </div>
            </template>


            <template v-else-if="v.prop === 'inventoryId'">
              <div
                v-for="item in row.goodsList"
                :key="item.id"
              >
                <template v-if="item.isTB">
                  {{$t('shipment.Not labeled')}}
                </template>
                <template v-else-if="item.isSystemLabel">
                  {{item.sku}}
                </template>
                <template v-else>
                  {{item.inventoryId || '-'}}
                </template>

              </div>
            </template>


            <template v-else-if="v.prop === 'accountType'">
              <template v-if="row.isPacket">
                小包
              </template>
              <template v-else>
                <div
                  v-for="goods in row.goodsList"
                  :key="goods.id"
                  :class="getPlatformTextColor(goods.accountType)"
                >
                  <template v-if="$store.getters.platformNum > 1">
                    {{getPlatformShortNameByAccountNum(goods.accountTypeNum)}}(<span>{{goods.showName}}</span>)
                  </template>
                  <template v-else>
                    <span>{{goods.showName}}</span>
                  </template>
                </div>
              </template>
            </template>


            <template v-else-if="v.prop === 'status'">
              <div
                v-for="goods in row.goodsList"
                :key="goods.id"
              >
                {{goods.status}}<span v-if="goods.catalogListing">，Catalog</span>
                <full-span :row="goods"></full-span>
                <flex-span :row="goods"></flex-span>
              </div>
            </template>


            <template v-else-if="v.prop === 'inventory'">
              <div
                v-for="goods in row.goodsList"
                :key="goods.id"
                :class="inventoryTipsClass(goods)"
              >
                <template v-if="goods.flexInventory !== null && goods.flexInventory >= 0">
                  FULL: {{goods.inventory}}，Flex: {{goods.flexInventory}}
                </template>
                <template v-else>
                  {{goods.inventory}}
                </template>
              </div>
            </template>

            <!-- 一件代发库存 -->
            <template v-else-if="v.prop === 'stockNum'">
              <div
                v-for="goods in row.goodsList"
                :key="goods.id"
                :class="{'font-red': row.sumStockNum < stockTipsNum}"
              >
                <template v-if="goods.isTB">-</template>
                <template v-else>
                  {{goods.sumStockNum}}
                </template>
              </div>
            </template>
            <template v-else-if="v.prop === 'stockNumSorted'">
              <div
                v-for="goods in row.goodsList"
                :key="goods.id"
              >
                {{goods.stockNumSorted}}
              </div>
            </template>


            <!-- 中转库存 -->
            <template v-else-if="v.prop === 'middleStockNum'">
              <div
                v-for="goods in row.goodsList"
                :key="goods.id"
              >
                <template v-if="goods.isSystemLabel">-</template>
                <template v-else>
                  {{goods.sumMiddleStockNum}}
                </template>
              </div>
            </template>

            <template v-else-if="v.prop === 'middleStockNumSorted'">
              <div
                v-for="goods in row.goodsList"
                :key="goods.id"
              >
                <template v-if="goods.isSystemLabel">-</template>
                <template v-else>
                  {{goods.middleStockNumSorted}}
                </template>
              </div>
            </template>


            <!--  重量与尺寸    -->
            <template v-else-if="v.prop === 'weight'">
              <goods-size-v2
                :suit-id="row.id"
                :goods-row="row"
              ></goods-size-v2>
            </template>

            <template v-else-if="v.prop === 'combinationFee'">
              <combination-fee-column :row="row"></combination-fee-column>
            </template>

            <template v-else-if="v.prop === 'fullStockNum'">
              <div
                v-for="goods in row.goodsList"
                :key="goods.id"
              >
                {{goods.sumFullStockNum}}
              </div>
            </template>

            <template v-else>
              {{ row[v.prop] }}
            </template>
          </template>
        </el-table-column>

        <el-table-column
          prop="op"
          :label="$t('table.operate')"
          align="left"
          min-width="250"
          fixed="right"
        >
          <template slot-scope="{row}">
            <div>
              <el-button @click="jumpEdit(row)" type="primary" class="mgb10 mgl10">{{$t('stock.Modify inventory')}}</el-button>
              <print-sku-info :data="row"></print-sku-info>
            </div>
            <div>
              <disposition-inventory-location-info class="mgb10 mgr10" :suitId="row.id" @change="changeOption()"></disposition-inventory-location-info>
              <stock-log-dialog :suit-id="row.id" style="display: inline" class=""></stock-log-dialog>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-tips">
        <p>{{$t('table.Front desk inventory')}}：{{$t('stock.stockText5')}}</p>
        <p>{{$t('table.%s Inventory')}}：{{$t('stock.stockText6')}}</p>
      </div>
      <div class="page-wrap">
        <el-pagination
          background
          layout="total ,sizes , prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          :page-sizes="[20, 50, 100]"
          @current-change="getData"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>

    <div class="content" v-show="queryParams.tabType !== 1">
      <el-table
        v-loading="loading"
        :data="fullData"
        @sort-change="handleSortChange"
        border
        v-tableHeightV2="{ bottomOffset: -100, additionalSelectors: ['.header', '.table-tips', '.page-wrap'] }"
        height="100px"
        ref="tableDataTwo"
      >
        <el-table-column
          prop="goodsImage"
          :label="$t('table.productCover')"
          align="center"
          width="110"
        >
          <template slot-scope="{row}">
            <div class="img-box img-one">
              <img :src="row.image" alt="">
            </div>
            <el-tag type="success" class="full-tag" v-if="row.isWarehouse === 0">FULL</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="userAccount"
          :label="$t('common.user')"
          align="left"
          width="100"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="goodsTitle"
          :label="$t('table.title')"
          align="left"
          width="250"
          show-overflow-tooltip
        >
          <template slot-scope="{row}">

            <div class="title hidden-2">
              {{ row.title }}
            </div>
            <p class="goods-attr">
              <span
                v-for="attr in row.attributes"
                :key="attr.name"
                class="attr"
                style="color: #7F7F7F;"
              >
                {{attr.name}} : {{attr.value}}
                <span class="attr-link"> | </span>
              </span>
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="goodsList"
          :label="$t('table.ListingIDAndSKU')"
          align="left"
          min-width="250"
        >
          <template slot-scope="{row}">
            <div
              v-for="goods in row.goodsList"
              :key="goods.id"
            >
              {{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}}
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="price"
          :label="$t('售价')"
          align="left"
          width="120"
        >
          <template #header>
            <span>{{$t('售价')}}</span>
            <el-tooltip class="item" effect="dark" placement="top">
              <template #content>{{ $t('商品有折扣价时显示折扣价，无折扣价时显示为原价') }}</template>
              <i class="el-icon-question font-blue" style="margin-left: 5px"></i>
            </el-tooltip>
          </template>
          <template v-slot="{row}">
            <div
              v-for="goods in row.goodsList"
              :key="goods.id"
            >
              <template v-if="goods.price">
                {{goods.currencyId}}  {{goods.price}}
              </template>
              <template v-else>
                -
              </template>
            </div>
          </template>
        </el-table-column>

        <m-l-code-list-column></m-l-code-list-column>
        <el-table-column
          prop="accountType"
          :label="$t('table.store')"
          align="left"
          min-width="150"
        >
          <template slot-scope="{row}">
            <div
              v-for="goods in row.goodsList"
              :key="goods.id"
              :class="getPlatformTextColor(goods.accountType)"
            >
              <template v-if="$store.getters.platformNum > 1">
                {{getPlatformShortNameByAccountNum(goods.accountTypeNum)}}(<span>{{goods.showName}}</span>)
              </template>
              <template v-else>
                <span>{{goods.showName}}</span>
              </template>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          :label="$t('table.Listing Status')"
          align="left"
          width="130"
        >
          <template slot-scope="{row}">
            <div
              v-for="goods in row.goodsList"
              :key="goods.id"
            >
              {{goods.status}}<span v-if="goods.catalogListing">，Catalog</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="inventory"
          :label="$t('table.Front desk inventory')"
          align="center"
          min-width="100"
          sortable="custom"
          :sort-orders="sortOrders"
        >
          <template slot-scope="{row}">
            <div
              v-for="goods in row.goodsList"
              :key="goods.id"
              :class="inventoryTipsClass(goods)"
            >
              {{goods.inventory}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="stockNum"
          :label="$t('table.%s Inventory')"
          align="center"
          min-width="100"
          sortable="custom"
          :sort-orders="sortOrders"
        >
          <template slot-scope="{row}">
            <div
              :class="{'font-red': row.stockNum < stockTipsNum}"
            >
              {{row.stockNum}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="underWayNum"
          :label="$t('table.In-transit inventory')"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="sales"
          :label="$t('table.sold')"
          align="left"
          min-width="100"
          sortable="custom"
          :sort-orders="sortOrders"
        >
          <template slot-scope="{row}">
            <div
              v-for="goods in row.goodsList"
              :key="goods.id"
            >
              {{goods.sales}}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-tips">
        <p>{{ $t('table.Front desk inventory') }}：{{ $t('stock.stockText5') }}</p>
      </div>
      <div class="page-wrap">
        <el-pagination
          background
          layout="total ,sizes , prev, pager, next, jumper"
          :current-page.sync="queryParams.page"
          :page-size="queryParams.pageSize"
          :total="total"
          :page-sizes="[20, 50, 100]"
          @current-change="getData"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>

import {createSkuInfoData, deleteStock, getFullGoodsList, getStockGoodsList, suitStockGoods} from "@/api/stock";
import {
  deepCopy,
  getFalabellaName,
  getMercadoName,
  getPlatformShortNameByAccountNum,
  getPlatformTextColor,
  getShopeeName,
  getSheinName,
  getMDAppVersion,
  getAmazonName,
  getTikTokName,
  getAliexpressName,
  deepClone,
} from "@/utils";
import {getGoodsList} from "@/api/goods";
import ExportButton from "@/views/order/components/ExportButton";
import UserOrderCheckBox from "@/views/order/components/UserOrderCheckBox";
import UploadExcel from "@/views/stock/components/UploadExcel";
import {getWareHouseName} from "@/utils/common";
import PrintSkuInfo from "@/views/stock/components/PrintSkuInfo.vue";
import DispositionInventoryLocationInfo from "@/views/stock/components/DispositionInventoryLocationInfo.vue";
import FullSpan from "@/views/stock/components/FullSpan.vue";
import MLCodeListColumn from "@/views/stock/components/MLCodeListColumn.vue";
import CustomFieldsDialog from "@/components/Common/CustomFieldsDialog.vue";
import {defaultFieldsConfig, STOCK_FIELDS_CONFIG} from "@/views/stock/config/fieldsConfig";
import stockListMixin from "@/views/stock/mixin/stockListMixin";
import GoodsSizeV2 from "@/views/stock/components/GoodsSizeV2";
// import PacketStockNum from "@/views/stock/components/PacketStockNum";
import StockNum from "@/views/stock/components/StockNum.vue";
import CombinationFeeColumn from "@/views/stock/components/CombinationFeeColumn.vue";
import StockLogDialog from "@/views/stock/components/StockLogDialog.vue";
import UserCheckBox from "@/views/shipment/components/UserCheckBox.vue";
import FlexSpan from "@/views/stock/components/FlexSpan";
import warehouseListMixin from "@/views/stock/mixin/warehouseListMixin";

const pageSizeKey = 'stockListPageSize'

export default {
  name: "stockList",
  components: {
    FlexSpan,
    UserCheckBox,
    StockLogDialog,
    CombinationFeeColumn,
    CustomFieldsDialog,
    MLCodeListColumn,
    FullSpan,
    ExportButton,
    UploadExcel,
    PrintSkuInfo,
    GoodsSizeV2,
    // PacketStockNum,
    DispositionInventoryLocationInfo,
  },
  mixins: [
    stockListMixin,
    warehouseListMixin,
  ],
  data(){
    return {
      loading: false,
      queryParams: {
        page: 1,
        pageSize: 20,
        keyword: '',
        accountIds: [-1],
        userIds: [-1],
        tabType: 1,
        orderField: '',
        orderBy: '',
        platformType: '',
        inventoryTips: 0,
        faInventoryTips: 0,
        spInventoryTips: 0,
        siInventoryTips: 0,
        awsInventoryTips: 0,
        tiktokInventoryTips: 0,
        aliexpressInventoryTips: 0,
        stockTips: 0,
        isCombinationGoods: '',
        accountId: '',
        haveStock: '',
      },
      data: [],
      fullData: [],
      total: 0,
      inventoryTipsNum: 0,
      faInventoryTipsNum: 0,
      spInventoryTipsNum: 0,
      siInventoryTipsNum: 0,
      awsInventoryTipsNum: 0,
      tiktokInventoryTipsNum: 0,
      aliexpressInventoryTipsNum: 0,
      stockTipsNum: 0,
      is_search: false,
      sortOrders: ['descending', 'ascending', null],
      defaultFieldsConfig,
    }
  },
  created() {
    this.inventoryTipsNum = this.$store.getters.inventoryTipsNum;
    this.faInventoryTipsNum = this.$store.getters.faInventoryTipsNum;
    this.spInventoryTipsNum = this.$store.getters.spInventoryTipsNum;
    this.siInventoryTipsNum = this.$store.getters.siInventoryTipsNum;
    this.awsInventoryTipsNum = this.$store.getters.awsInventoryTipsNum;
    this.tiktokInventoryTipsNum = this.$store.getters.tiktokInventoryTipsNum;
    this.aliexpressInventoryTipsNum = this.$store.getters.aliexpressInventoryTipsNum;
    this.stockTipsNum = this.$store.getters.stockTipsNum;
    const pageSize = localStorage.getItem(pageSizeKey)
    if(pageSize){
      this.queryParams.pageSize = Number(pageSize)
    }
  },
  updated () {
    this.$nextTick(() => {
      this.$refs['tableDataOne'].doLayout();
      this.$refs['tableDataTwo'].doLayout();
    })
  },
  methods:{
    getPlatformTextColor,
    getShopeeName,
    getSheinName,
    getAmazonName,
    getTikTokName,
    getAliexpressName,
    getPlatformShortNameByAccountNum,
    getFalabellaName,
    getMercadoName,
    getWareHouseName,
    getFullGoodsList,
    getStockGoodsList,
    firstGetData(){
      this.getUserFields(STOCK_FIELDS_CONFIG)
        .then(res=>{
          this.createTableFieldsConfig()
          this.getData()
        })
        .catch(()=>{
          this.getData()
        })
    },
    // 获取表单数据
    getData(){
      this.loading = true
      if(this.queryParams.tabType === 1){
        getStockGoodsList(this.queryParams)
          .then(res=>{
            this.loading = false
            this.data = deepCopy(res.data)
            this.total = res.info.total
            this.selectAccountList = res.info.selectAccountList
          })
      }else{
        getStockGoodsList(this.queryParams)
          .then(res=>{
            this.loading = false;
            this.fullData = deepCopy(res.data)
            this.total = res.info.total
            this.selectAccountList = res.info.selectAccountList
          })
      }
    },
    // 触发变更事件
    changeOption(is_search = false, type = ''){
      if (is_search === true && type === 'search') {
        //判断是否使用过搜索按钮
        this.is_search = true
      }
      if (type === 'clear') {
        if (this.is_search === false) {
          return
        } else {
          this.is_search = false
        }
      }
      this.queryParams.page = 1;
      this.getData()
    },
    // 跳转到修改库存详情
    jumpEdit(row){
      // 跳转到添加页面
      const { href } = this.$router.resolve({
        name: 'editStock',
        query:{
          id: row.id,
        }
      })
      window.open(href,'_blank')
    },
    handleSizeChange(pageSize){
      this.queryParams.pageSize = pageSize
      localStorage.setItem(pageSizeKey,this.queryParams.pageSize)
      this.queryParams.page = 1
      this.getData()
    },
    changeButton(field){
      switch (field){
        case 'inventory':
          this.queryParams.inventoryTips = this.queryParams.inventoryTips === 1 ? 0 : 1;
          break;
        case 'stock':
          this.queryParams.stockTips = this.queryParams.stockTips === 1 ? 0 : 1;
          break;
        case 'faInventory':
          this.queryParams.faInventoryTips = this.queryParams.faInventoryTips === 1 ? 0 : 1;
          break;
        case 'spInventory':
          this.queryParams.spInventoryTips = this.queryParams.spInventoryTips === 1 ? 0 : 1;
          break;
        case 'siInventory':
          this.queryParams.siInventoryTips = this.queryParams.siInventoryTips === 1 ? 0 : 1;
          break;
        case 'awsInventory':
          this.queryParams.awsInventoryTips = this.queryParams.awsInventoryTips === 1 ? 0 : 1;
          break;
        case 'tiktokInventory':
          this.queryParams.tiktokInventoryTips = this.queryParams.tiktokInventoryTips === 1 ? 0 : 1;
          break;
        case 'aliexpressInventory':
          this.queryParams.aliexpressInventoryTips = this.queryParams.aliexpressInventoryTips === 1 ? 0 : 1;
          break;
      }
      this.changeOption()
    },
    handleSortChange(column){
      this.queryParams.orderBy = '';
      this.queryParams.orderField = '';
      if(column.order){
        this.queryParams.orderBy = column.order;
        this.queryParams.orderField = column.prop
      }
      this.changeOption()
    },
    inventoryTipsClass(row){
      let flag = false
      switch (row.accountTypeNum){
        case 1:
          flag = row.inventory < this.inventoryTipsNum
          break;
        case 2:
          flag = row.inventory < this.faInventoryTipsNum
          break;
        case 3:
          flag = row.inventory < this.spInventoryTipsNum
          break;
        case 4:
          flag = row.inventory < this.siInventoryTipsNum
          break;
        case 5:
          flag = row.inventory < this.awsInventoryTipsNum
          break;
        case 6:
          flag = row.inventory < this.tiktokInventoryTipsNum
          break;
        case 8:
          flag = row.inventory < this.aliexpressInventoryTipsNum
          break;
      }
      return {
        'font-red': flag
      }
    },
    submitTableField(selectedFields){
      this.loading = true;
      this.setUserFields(STOCK_FIELDS_CONFIG, selectedFields)
        .then(() => {
          this.loading = false;
          this.userSelectedFields = selectedFields;
          this.createTableFieldsConfig();

          // 字段更新排序，列排序不会发生变化
          // 这里强制刷新表格
          this.refreshTableKey++;
        })
        .catch(() => {
          this.loading = false;
          this.$message.error("保存失败, 请稍后再试");
        });
    }
  }
}
</script>
<style lang="scss">
.goods-table{
  .el-table__expand-icon {
    float: left;
    line-height: 100px;
    height: 100px;
    font-size: 14px;
    position: absolute;
    top: 30px;
    left: 5px;
  }
}
</style>

<style scoped lang="less">
.wrap {
  padding: 30px 30px;
  .header{
    //display: flex;
    //justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
}
</style>

<style lang="less">
.channel-form{
  &.el-form{
    .el-form-item__label{
      word-break: break-word;
    }
  }
}
.channel-box-card{
  .el-card__header{
    padding: 5px 10px;
    font-size: 12px;
    line-height: 26px;
  }
  .el-card__body{
    padding: 0;
  }
}
.query-select{
  margin-right: 20px;
}
.select-goods-dialog{
  .footer{
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
  }
}
.full-tag{
  position: absolute;
  top: 0;
  left: 0;
}
.hover-danger:hover ,.hover-danger:focus{
  color: #ff4949;
  background: #ffeded;
  border-color: #ffb6b6;
}
.order-status-tag{
  font-weight: bold;
}
.img-tag{
  position: absolute;
  top: 0;
  left: 0;
}
</style>
